<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <meta name="author" content="林镭特" />
    <title></title>
    <style>
      .box {
        display: flex;
        position: relative;
        height: 30px;
      }
      .star {
        display: flex;
        margin-left: 20px;
      }
      .star div {
        width: 30px;
        height: 30px;
        background: url("img/star.png") center 0/30px auto;
      }
      .star div.on {
        background-position: 0 -44px;
      }
      .result {
        margin-left: 20px;
      }
      .tips {
        position: absolute;
        top: 30px;
        left: 0;
        width: 200px;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <span>点击星星评分</span>
      <div class="star">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
      <span class="result"></span>
      <div class="tips"></div>
    </div>

    <script src="jQuery.js"></script>
    <script>
      var megs = [
        "很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
      ];
      
      function showStar(n){
        $('.item').each(function(index){
          
            index<n ? $(this).addClass('on') : $(this).removeClass('on');
    
        });
    }
    $('.item').hover(function(){
        var index = $(this).index();
        showStar(index+1);
        console.log($(this).position().left);
        var str = index+1 + ' ' +megs[index].split('|')[0]+ '<br>' +megs[index].split('|')[1];
        $('.tips').show().html(str).css({
            left:$(this).position().left
        });

        $(this).click(function(){
            score = index+1;
            var str = score + ' ' +megs[index].split('|')[0]+ ' ' +megs[index].split('|')[1];
            $('.result').html(str);
            $('.tips').hide();
        });
    }, function(){
        showStar(score);
        $('.tips').hide();
    });
    var score = 0;
























      // function showstar(num) {
      //   for (var i = 0; i < $(".item").length; i++) {
      //     $(".item")[i].className = i < num ? "on" : "";
      //   }
      // }

      // var score = 0;
      // $(".item").hover(
      //   function() {
      //     showstar($(this).index() + 1);
      //     $(".tips")
      //       .text(megs[$(this).index()])
      //       .css("left", $(this).offset().left);
      //   },
      //   function() {
      //     showstar(score);
      //     $(".tips").text("");
      //   }
      // );
      // $(".item").click(function() {
      //   score = $(this).index() + 1;
      //   $(".result").text(megs[$(this).index()]);
      // });
    </script>
  </body>
</html>
